<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-input v-model="biProjectName" class="zs-select-md zs-space-right-sm" :disabled="true" placeholder="项目" />
				<el-date-picker class="zs-select-md zs-space-right-sm" :disabled="true" v-model="updateDate" />
				<el-select v-model="queryParams.brandnam" class="zs-select-md zs-space-right-sm" placeholder="品牌" clearable filterable @change="queryList">
					<el-option v-for="item in brandList" :key="item" :label="item" :value="item" />
				</el-select>
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': queryParams.propertytypename || queryParams.buildingname || queryParams.floorsname || queryParams.rentalStatus || queryParams.contractsstatus || queryParams.customertype }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-select v-model="queryParams.propertytypename" class="zs-select-md zs-space-right-sm" placeholder="资产类型" clearable @change="queryList" :teleported="false">
							<el-option v-for="item in assetTypeList" :key="item" :label="item" :value="item" />
						</el-select>
						<el-select v-model="queryParams.buildingname" class="zs-select-md zs-space-right-sm" placeholder="楼栋" clearable filterable @change="getFloorList" :teleported="false">
							<el-option v-for="item in buildingList" :key="item" :label="item" :value="item" />
						</el-select>
						<el-select v-model="queryParams.floorsname" class="zs-select-md zs-space-right-sm" placeholder="楼层" clearable filterable @change="queryList" :teleported="false">
							<el-option v-for="item in floorList" :key="item" :label="item" :value="item" />
						</el-select>
						<el-select v-model="queryParams.rentalStatus" class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="租赁状态" clearable @change="queryList" :teleported="false">
							<el-option v-for="item in rentalStatusList" :key="item" :label="item" :value="item" />
						</el-select>
						<el-select v-model="queryParams.contractsstatus" class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="合同状态" clearable @change="queryList" :teleported="false">
							<el-option v-for="item in contractStatusList" :key="item" :label="item" :value="item" />
						</el-select>
						<el-select v-model="queryParams.customertype" class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="商户类型" clearable @change="queryList" :teleported="false">
							<el-option v-for="item in customerTypeList" :key="item" :label="item" :value="item" />
						</el-select>
					</template>
				</el-popover>
				<el-button class="zs-btn-plain" @click="queryList"> 查询 </el-button>
			</span>
			<span>
				<el-button class="zs-btn-plain zs-btn-md" @click="exportFn">
					<el-icon class="el-icon--left"> <Upload /> </el-icon>导出
				</el-button>
			</span>
		</div>

		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe @sort-change="sortChange">
				<el-table-column type="index" label="序号" width="60" :align="'center'" :index="(index) => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="propertytypename" label="资产类型" minWidth="120" show-overflow-tooltip :align="'left'" :formatter="defaultTableData" />
				<el-table-column prop="buildingname" label="楼栋" minWidth="120" show-overflow-tooltip :align="'left'" :formatter="defaultTableData" />
				<el-table-column prop="floorsname" label="楼层" minWidth="120" show-overflow-tooltip :align="'left'" :formatter="defaultTableData" />

				<el-table-column v-if="routeQuery.leaseType == 'zhongdao'"  label="单元编号" :align="'left'" width="120">
					<template #default="scope">
						<el-tooltip effect="dark" :content="scope.row.allunitcode" placement="top">
							<div class="zs-text-ellipsis">{{ scope.row.conshopcode }}</div>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column v-if="routeQuery.leaseType == 'warehouse'"  label="库房编号" :align="'left'" width="120">
					<template #default="scope">
						<el-tooltip effect="dark" :content="scope.row.allunitcode" placement="top">
							<div class="zs-text-ellipsis">{{ scope.row.conshopcode }}</div>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column v-if="routeQuery.leaseType == 'place'"  label="场地编号" :align="'left'" width="120">
					<template #default="scope">
						<el-tooltip effect="dark" :content="scope.row.allunitcode" placement="top">
							<div class="zs-text-ellipsis">{{ scope.row.conshopcode }}</div>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column v-if="routeQuery.leaseType == 'ad'"  label="广告位编号" :align="'left'" width="120">
					<template #default="scope">
						<el-tooltip effect="dark" :content="scope.row.allunitcode" placement="top">
							<div class="zs-text-ellipsis">{{ scope.row.conshopcode }}</div>
						</el-tooltip>
					</template>
				</el-table-column>

				<el-table-column prop="usablearea" label="租赁面积" minWidth="120" class-name="db-table-cell-border-right" show-overflow-tooltip :align="'right'" :formatter="defaultTableData" />
				<el-table-column prop="rentalstatus" label="租赁状态" minWidth="120" class-name="db-table-cell-border-right" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />

				<el-table-column v-if="['zhongdao', 'place', 'ad'].includes(routeQuery.leaseType)" prop="brandname" label="品牌名称" minWidth="120" show-overflow-tooltip :align="'left'" :formatter="defaultTableData" />
				<el-table-column v-if="routeQuery.leaseType == 'warehouse'" prop="brandname" label="库房名称" minWidth="120" show-overflow-tooltip :align="'left'" :formatter="defaultTableData" />

				<el-table-column prop="contractsigndate" label="签约日期" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="constartdate" label="合同开始" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column v-if="routeQuery.leaseType == 'zhongdao' || routeQuery.leaseType == 'place'" prop="chargestartdate" label="起租日期" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="conenddate" label="合同结束" minWidth="120" class-name="db-table-cell-border-right" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />

				<el-table-column v-if="routeQuery.leaseType == 'zhongdao' || routeQuery.leaseType == 'place'" prop="decorationperiod" label="装修期" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" sortable="custom" />
				<el-table-column prop="rentperiod" label="租期" minWidth="120" class-name="db-table-cell-border-right" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" sortable="custom" />

				<el-table-column prop="daysdue" label="到期天数" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" sortable="custom" />
				<el-table-column prop="vacantdays" label="空置天数" minWidth="120" class-name="db-table-cell-border-right" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" sortable="custom" />

				<el-table-column prop="contractscode" label="合同编号" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="contractsstatus" label="合同状态" minWidth="120" class-name="db-table-cell-border-right" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />

				<el-table-column prop="customername" label="商户名称" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="customertype" label="商户类型" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
			</el-table>
			<div class="zs-text-gray-dark zs-text-sm zs-space-top">*面积：m²</div>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { useStore } from 'vuex';
	import { useRoute } from 'vue-router';
	import { defaultTableData, downloadNewFile } from '@/utils/publicUtils';
	import dashBoardApi from '@/api/Manage/Business/dashBoard';

	const routeQuery = useRoute().query;
	let store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);

	const rentType = {
		zhongdao: { title: '中岛位', type: '中岛位' },
		warehouse: { title: '库房', type: '库房' },
		place: { title: '场地', type: '场地' },
		ad: { title: '广告位', type: '广告位' },
	};
	const biProjectName = ref(decodeURI(routeQuery.biProjectName) || '');
	const updateDate = ref(routeQuery.updateDate);
	const fixParams = {
		biProjectCode: routeQuery.biProjectCode,
		time: routeQuery.updateDate,
		propertytypename: rentType[routeQuery.leaseType].type,
	};

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	//查询条件
	let queryParams = reactive({ pageNo: 1, pageSize: curPageSize.value, propertytypename: rentType[routeQuery.leaseType].type });

	//列表数据源
	const queryList = async () => {
		tableData.loading = true;
		let params = Object.assign(fixParams, queryParams);
		let res = await dashBoardApi.leaseDetailApi(params);
		if (res.data.code !== 200) return;
		initData(res.data.data.childList);
		tableData.data = res.data.data.childList || [];
		tableData.total = res.data.data.totalCount || 0;
		tableData.loading = false;
	};

	const initData = list => {
		list.forEach(item => {
			item.daysduev = Number(item.daysdue) || 0;
			item.vacantdaysv = Number(item.vacantdays) || 0;
			item.decorationperiodv = Number(item.decorationperiodv) || 0;
			item.rentperiodv = Number(item.rentperiodv) || 0;
		});
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			queryParams.pageSize = size;
		} else {
			queryParams.pageNo = size;
		}
		queryList();
	};

	//排序
	const sortChange = data => {
		console.log(data);
		const sortFiledList = ['daysdue', 'decorationperiod', 'rentperiod', 'vacantdays'];
		sortFiledList.forEach(item => (queryParams[item] = null));
		queryParams[data.prop] = data.order == "ascending" ? 0 : 1;
		queryList();
	};

	//品牌
	let brandList = ref();
	const getBrandnamList = async () => {
		let res = await dashBoardApi.brandListApi(fixParams);
		brandList.value = res.data.data;
	};

	//资产类型
	let assetTypeList = ref();
	const getAssetTypeList = async () => {
		let res = await dashBoardApi.propertyTypeListApi(fixParams);
		assetTypeList.value = res.data.data;
	};

	//楼栋
	let buildingList = ref();
	const getBuildingList = async () => {
		let res = await dashBoardApi.buildingListApi(fixParams);
		buildingList.value = res.data.data;
	};

	//楼层
	let floorList = ref();
	const getFloorList = async () => {
		let params = {
			...fixParams,
			buildingname: queryParams.buildingname,
		};
		let res = await dashBoardApi.floorListApi(params);
		floorList.value = res.data.data;
	};

	//租赁状态
	let rentalStatusList = ref();
	const getRentalStatusList = async () => {
		let res = await dashBoardApi.rentalStatusListApi(fixParams);
		rentalStatusList.value = res.data.data;
	};

	//合同状态
	let contractStatusList = ref();
	const getContractStatusList = async () => {
		let res = await dashBoardApi.contractStatusListApi(fixParams);
		contractStatusList.value = res.data.data;
	};

	//商户类型
	let customerTypeList = ref();
	const getCustomerTypeList = async () => {
		let res = await dashBoardApi.customerTypeListApi(fixParams);
		customerTypeList.value = res.data.data;
	};

	//导出
	const exportFn = async () => {
		const fileName = `多经出租明细表.xls`;
		let params = Object.assign(fixParams, queryParams);
		let fileData = await dashBoardApi.leaseExportApi(params);
		downloadNewFile(fileData.data, fileName);
	};

	getBrandnamList();
	getAssetTypeList();
	getBuildingList();
	getRentalStatusList();
	getContractStatusList();
	getCustomerTypeList();
	queryList();
</script>
